var gChosenCategories;


function CategoriesPageBuilder ( ) {
	PageBuilder.call(this);
}

CategoriesPageBuilder.prototype = new PageBuilder();

CategoriesPageBuilder.prototype.constructor = CategoriesPageBuilder;

CategoriesPageBuilder.prototype.build = function () {
	$("#categoriesPanelHeader").html( getDisplayString("categories_panel_header"));
};


$(document).ready(function(){
	setLogin();
	buildPage(new CategoriesPageBuilder());
	gChosenCategories = new Array();
	getCategories();
});


function getWidgetsForCategories ()
{
	var keys = Object.keys(gChosenCategories);
	var categoryIds = '';
	for ( var i=0; i<keys.length; i++ ) {
		var key = keys[i];
		if ( gChosenCategories[key] != false ) {
			categoryIds += key+',';
		}
	}
	if ( categoryIds.length > 0 ) {
		// remove last char
		categoryIds = categoryIds.substring(0, categoryIds.length-1);
		var rest = store_rest_url + "/widgets/categories/"+categoryIds;
		
		$.ajax({
			url: rest,
			type: "GET",
			dataType:"TEXT",
			success: buildWidgetList
		});
	}
	else {
		//don't make a call with no categories, it causes and exception
		// just clear the list
		
		$("#items").html('');
	}

}


function buildWidgetList ( jsonString ) {
	var widgets = [];
	parseAndCopyWidgetList (jsonString, widgets );	
	buildSpecialWidgetListHTML ( widgets );
}

function getCategories ( ) {
	var restURI = store_rest_url + "/categories";
	$.ajax({
		url: restURI,
		type: "GET",
		dataType: "TEXT",
		success: parseCategories
	});
}

function parseCategories( jsonString ) {
	$categories = $.parseJSON ( jsonString );
	buildCategoryLists($categories);
}


function selectCategory ( checkBoxElement ) {
	var selected = checkBoxElement.checked;
	var categoryName = checkBoxElement.name;
	gChosenCategories[categoryName] = selected;
	getWidgetsForCategories();
}


/*
<div class="sideNavigationBox" id="sideNavigationBox">
<div class="categoryGroupBox" id="mainCategories"><div class="categoryGroupTitle">Subject</div></div>
<div class="categoryGroupBox" id="ageCategories"><div class="categoryGroupTitle">Age</div></div>
<div class="categoryGroupBox" id="skillsCategories"><div class="categoryGroupTitle">21st Century Skills</div></div>
</div>

*/

function buildCategoryLists(categories) {
	var generalList = categories[0];
	var ageList = categories[1];
	var skillsList = categories[2];
	
	for ( var i = 0; i < generalList.length; i++ ) {
		var category = generalList[i];
		var categoryCheck = '<input type="checkbox" onClick="selectCategory(this)" name="'+category.id+'" value="'+category.title+'">&nbsp;'+category.title+'</input><br/>';
		$("#mainCategories").append(categoryCheck);
		gChosenCategories[category.id] = false;
	}
	for ( var i = 0; i < ageList.length; i++ ) {
		var category = ageList[i];
		var categoryCheck = '<input type="checkbox" onClick="selectCategory(this)" name="'+category.id+'" value="'+category.title+'">&nbsp;'+category.title+'</input><br/>';
		$("#ageCategories").append(categoryCheck);
		gChosenCategories[category.id] = false;
	}
	for ( var i = 0; i < skillsList.length; i++ ) {
		var category = skillsList[i];
		var categoryCheck = '<input type="checkbox" onClick="selectCategory(this)" name="'+category.id+'" value="'+category.title+'">&nbsp;'+category.title+'</input><br/>';
		$("#skillsCategories").append(categoryCheck);
		gChosenCategories[category.id] = false;
	}
}// JavaScript Document